<template>
	<custom-page :left-buttons="[]" title="娱乐" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #page>
			<view class="page-content">
				<top-tab-bar-news minWidth="20%" :tabs="tabDatas" :current="current"
					@changed="onTabItemChange($event)"></top-tab-bar-news>
				<common-list-view ref="squareList" class="list-view" :hasNoDataHolder="true" :enableLoadMore="true"
					:enableRefresh="true" @listinit="onListInit($event)" v-if="isShowInfo">
					<template #content='{datas}'>
						<view class="assistant-video-view">
							<assistant-video-item v-for="(item, index) in datas" :itemData="item"
								@itemClick="videoClick(item)"></assistant-video-item>
						</view>
						<view style="height: 32rpx;"></view>
					</template>
				</common-list-view>
				<common-list-view ref="squareList" class="list-view" :hasNoDataHolder="true" :enableLoadMore="true"
					:enableRefresh="true" @listinit="onListInit($event)" v-else>
					<template #content='{datas}'>
						<view class="assistant-video-view">
							<assistant-video-item v-for="(item, index) in datas"
								:itemData="item"></assistant-video-item>
						</view>
						<view style="height: 32rpx;"></view>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				tabDatas: [{
						text: '助教风采',
						value: '0'
					},
					{
						text: '球友风采',
						value: '4'
					}
				],
				current: 0,
				currentPage: 1,
				isShowInfo: true,
				showType: '0',
			}
		},
		onLoad() {
			this.requestCenter.getSystemConfig().then(res => {
				this.isShowInfo = res.formSupport
			})
		},
		methods: {
			onListInit(event) {
				event.target.loadPageData = ({
					start,
					pageSize,
					showLoading = false
				}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						status: 1, //审核通过
						showType: this.showType, //类别0-广场助教风采视频1-广场助教图片2-个人中心视频3-个人中心图片4-广场球友发风采视频5-广场球友风采图片	
						sourceType: '3', //0-管理后台列表 1-app或小程序广场 2-app小程序个人中心	
					}
					return this.requestCenter.getSquareAssistantVideo(params)
						.then(res => {
							this.currentPage = start
							return Promise.resolve({
								curPage: start,
								pageCount: res.pages || 1,
								datas: res.records || []
							})
						})
				}
			},

			//tab切换
			onTabItemChange: function(event) {
				this.current = event.value
				this.showType = this.tabDatas[this.current].value
				this.$refs.squareList.triggerLoadData({
					start: 1,
					showLoading: true
				})
			},

			//视频点击
			videoClick(item) {
				uni.navigateTo({
					url: `/pages/square-video-swiper/square-video-swiper?showType=${this.tabDatas[this.current].value}&currentPage=${this.currentPage}&squareVideoId=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.list-view {
		flex: 1;
		overflow: hidden;
	}

	.assistant-video-view {
		padding: 0 16rpx;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.no-more-holder {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: white;
		text-align: center;
	}
</style>